react-feather

What is react-feather?

The react-feather npm package provides a collection of simply beautiful open source icons for React.js. It is a React wrapper for the Feather icons, which are designed to be simple, consistent, and customizable.

What are react-feather's main functionalities?

Icon Usage

This feature allows you to easily import and use Feather icons in your React components. The example demonstrates how to import the Camera icon and use it within a React component.

import { Camera } from 'react-feather';

function App() {
  return (
    <div>
      <Camera />
    </div>
  );
}

Customizable Icons

Icons can be customized by passing props such as color and size. The example shows how to change the color to red and the size to 48 pixels.

import { Camera } from 'react-feather';

function App() {
  return (
    <div>
      <Camera color="red" size={48} />
    </div>
  );
}

Icon Styling

You can apply custom styles to the icons using the style prop. The example demonstrates how to add margin and rotate the Camera icon by 45 degrees.

import { Camera } from 'react-feather';

function App() {
  return (
    <div>
      <Camera style={{ margin: '10px', transform: 'rotate(45deg)' }} />
    </div>
  );
}

Other packages similar to react-feather

react-icons

react-icons provides a comprehensive set of icons from various icon libraries such as Font Awesome, Material Design, and more. It offers a wider range of icons compared to react-feather, making it a versatile choice for projects that require icons from different libraries.

fontawesome

fontawesome is a popular icon library that offers a vast collection of icons. The React wrapper for Font Awesome allows for easy integration into React projects. It provides more icon options and advanced features like icon stacking and animation, which are not available in react-feather.

README

React Feather Icons

What is react-feather?

react-feather is a collection of simply beautiful open source icons for React.js. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability.

Based on Feather 4.12.1

Installation

npm install react-feather --save

Usage

import React from 'react';
import { Camera } from 'react-feather';

const App = () => {
  return <Camera />
};

export default App;

If you are using WebPack, you can import only one icon.

import React from 'react';
import Camera from 'react-feather/dist/icons/camera';

const App = () => {
  return <Camera />
};

export default App;

If you can't use ES6 imports, it's possible to include icons from the compiled folder ./dist.

var Camera = require('react-feather/dist/icons/camera').default;

var MyComponent = React.createClass({
  render: function () {
    return (
      <Camera />
    );
  }
});

You can also include the whole icon pack:

import React from 'react';
import * as Icon from 'react-feather';

const App = () => {
  return <Icon.Camera />
};

export default App;

Icons can be configured with inline props:

<Icon.AlertCircle color="red" size={48} />